
<div class="bg-white shadow rounded-lg mb-4">
    <div class="flex flex-row font-bold p-2 border-b">
        <p>修改资料</p>
    </div>
    <div class="flex flex-col p-4">
        <div class="grid md:grid-cols-2 gap-4">
            <div class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1">
                <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
                    <p>
                        <label for="name" class="bg-white text-gray-600 px-1">名字</label>
                    </p>
                </div>
                <p>
                    <input id="name" autocomplete="false" tabindex="0" type="text" class="py-1 px-1 text-gray-900 outline-none block h-full w-full">
                </p>
            </div>
            <div class="flex items-center text-sm text-gray-500">用户名来源于微信返回</div>

            <div class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1">
                <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
                    <p>
                        <label for="name" class="bg-white text-gray-600 px-1">GitHub Name</label>
                    </p>
                </div>
                <p>
                    <input id="name" autocomplete="false" tabindex="0" type="text" class="py-1 px-1 text-gray-900 outline-none block h-full w-full">
                </p>
            </div>
            <div class="flex items-center text-sm text-gray-500">请跟 GitHub 上保持一致,如 zhaopengme</div>

            <div class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1">
                <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
                    <p>
                        <label for="name" class="bg-white text-gray-600 px-1">微博用户名</label>
                    </p>
                </div>
                <p>
                    <input id="name" autocomplete="false" tabindex="0" type="text" class="py-1 px-1 text-gray-900 outline-none block h-full w-full">
                </p>
            </div>
            <div class="flex items-center text-sm text-gray-500">请跟微博上保持一致, 如 joypen</div>


            <div class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1">
                <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
                    <p>
                        <label for="name" class="bg-white text-gray-600 px-1">个人网站</label>
                    </p>
                </div>
                <p>
                    <input id="name" autocomplete="false" tabindex="0" type="text" class="py-1 px-1 text-gray-900 outline-none block h-full w-full">
                </p>
            </div>
            <div class="flex items-center text-sm text-gray-500">如：example.com，不需要加前缀 https://</div>

            <div class="border focus-within:border-blue-500 focus-within:text-blue-500 transition-all duration-500 relative rounded p-1">
                <div class="-mt-4 absolute tracking-wider px-1 uppercase text-xs">
                    <p>
                        <label for="name" class="bg-white text-gray-600 px-1">个人简介</label>
                    </p>
                </div>
                <p>
                    <textarea id="name" autocomplete="false" tabindex="0" type="text" class="py-1 px-1 text-gray-900 outline-none block h-full w-full" ></textarea>
                </p>
            </div>
            <div class="flex items-center text-sm text-gray-500">请一句话介绍你自己，大部分情况下会在你的头像和名字旁边显示</div>
        </div>
        <div class="mt-6">
            <a href="#"
               class="py-2 px-2 bg-gray-700 text-gray-100 rounded-lg hover:bg-gray-900 font-medium">应用修改</a>
        </div>
    </div>
</div>
